<template>
    <div class="draw-type-c">
        <div class="hand font0 font-0">
            <div class="ul-p border-right" style="margin-right: 20px">
                <span style="margin-right: 10px">半径范围:</span>
                <el-input-number
                    v-model.number="radius"
                    class="indexInput"
                    controls-position="right"
                    :min="1"
                    :max="99999"
                    @change="changeRadius"
                    @focus="focusRadius"
                ></el-input-number>
            </div>

            <div
                class="ul-p selectType"
                title="选点"
                :class="{ active: activeIndex === 1 }"
                @click="(e) => drawTypeSelect(e, 'handCircle', 1)"
            >
                <div class="smallBox">
                    <SvgIcon class="SvgIconFont" name="touch" :class="{ 'color-SvgIcon': activeIndex === 1 }"></SvgIcon>
                    <span>选点</span>
                </div>
            </div>
            <div
                class="ul-p selectType"
                title="折线"
                :class="{ active: activeIndex === 2 }"
                @click="(e) => drawTypeSelect(e, 'polyline', 2)"
            >
                <div class="smallBox">
                    <SvgIcon
                        class="SvgIconFont"
                        name="polyline"
                        :class="{ 'color-SvgIcon': activeIndex === 2 }"
                    ></SvgIcon>
                    <span>折线</span>
                </div>
            </div>
            <div class="ul-p selectType" title="楼盘" :class="{ active: activeIndex === 0 }" @click="showSearchPop(0)">
                <div class="smallBox">
                    <SvgIcon
                        class="SvgIconFont"
                        name="building"
                        :class="{ 'color-SvgIcon': activeIndex === 0 }"
                    ></SvgIcon>
                    <span>楼盘</span>
                </div>
            </div>
            <div
                class="ul-p selectType"
                title="坐标"
                :class="{ active: activeIndex === 3 }"
                @click="showSearchCoordinate(3)"
            >
                <div class="smallBox">
                    <SvgIcon class="SvgIconFont" name="coord" :class="{ 'color-SvgIcon': activeIndex === 3 }"></SvgIcon>
                    <span>坐标</span>
                </div>
            </div>

            <div class="ul-p selectButton">
                <el-button @click="resetPath"> 重置 </el-button>
                <el-button @click="returnAfter"> 返回上一步 </el-button>
            </div>
        </div>
        <div v-show="isShow" class="search-popup">
            <div class="sanjiao"></div>
            <search-popup
                ref="searchPopup"
                title="项目定位"
                :buildings="buildings"
                @hide="hide"
                @selectLocation="selectLocation"
            ></search-popup>
        </div>
        <div v-show="isCoordinateShow" class="search-coordinate">
            <div class="sanjiao"></div>
            <search-coordinate
                ref="searchCoordinate"
                title="坐标定位"
                :buildings="buildings"
                @hide="hide"
                @selectLocation="selectLocation"
            ></search-coordinate>
        </div>
    </div>
    <div class="draw-type-c">
        <div class="hand font0 font-0">
            <div
                class="ul-p selectType"
                title="拖动地图"
                :class="{ active: activeIndex === 7 }"
                @click="(e) => drawTypeSelect(e, 'hander', 7)"
            >
                <div class="smallBox">
                    <SvgIcon class="SvgIconFont" name="drag" :class="{ 'color-SvgIcon': activeIndex === 7 }"></SvgIcon>
                    <span class="fontText">拖动地图</span>
                </div>
            </div>
            <div
                class="ul-p selectType"
                title="画矩形"
                :class="{ active: activeIndex === 4 }"
                @click="(e) => drawTypeSelect(e, 'rectangle', 4)"
            >
                <div class="smallBox">
                    <SvgIcon
                        class="SvgIconFont"
                        name="square"
                        :class="{ 'color-SvgIcon': activeIndex === 4 }"
                    ></SvgIcon>
                    <span>画矩形</span>
                </div>
            </div>
            <div
                class="ul-p selectType"
                title="画圆"
                :class="{ active: activeIndex === 5 }"
                @click="(e) => drawTypeSelect(e, 'circle', 5)"
            >
                <div class="smallBox">
                    <SvgIcon
                        class="SvgIconFont"
                        name="circle"
                        :class="{ 'color-SvgIcon': activeIndex === 5 }"
                    ></SvgIcon>
                    <span>画圆</span>
                </div>
            </div>
            <div
                class="ul-p selectType"
                title="画多边形"
                style="padding-right: 0px"
                :class="{ active: activeIndex === 6 }"
                @click="(e) => drawTypeSelect(e, 'polygon', 6)"
            >
                <div class="smallBox">
                    <SvgIcon
                        class="SvgIconFont"
                        name="polygon"
                        :class="{ 'color-SvgIcon': activeIndex === 6 }"
                    ></SvgIcon>
                    <span>画多边形</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import searchPopup from './SearchPopup.vue';
import searchCoordinate from './SearchCoordinate.vue';

// const MAX_COUNT = 5;
export default {
    name: 'DrawType',
    components: {
        searchPopup,
        searchCoordinate,
    },
    props: {
        cityName: {
            type: String,
            default: '',
        },
        drawTypeWarning: {
            type: String,
            default: '请在离开城市界面前添加点位到购物车(离开后，手动选点操作不会被保留)',
        },
        // 所有楼盘点位数据
        buildings: {
            type: Array,
            required: true,
        },
        // length: { // 当前选点的个数
        //   type: Number,
        //   required: true
        // },
    },
    data() {
        return {
            isShow: false,
            isCoordinateShow: false,
            activeIndex: null,
            radius: 1000,
        };
    },
    methods: {
        focusRadius() {
            this.drawTypeSelect('', 'hander', 7);
        },
        changeRadius(value) {
            let val = +value;
            if (!val) {
                return;
            }
            this.radius = val;
            // if (val && !/^\d+$/.test(val)) {
            //   this.radius = 1
            // }
            // if (val && val > 99999) {
            //   this.radius = 99999
            // }
            this.$emit('radiusValue', this.radius);
        },
        cancleSelect() {
            this.drawTypeSelect('', 'hander', 7);
            this.$refs.searchPopup.clearInput();
            this.$refs.searchCoordinate.clearInput();
        },
        selectLocation(val) {
            this.$emit('drawTypeSelect', val, 'selectAndTo');
        },
        drawTypeSelect(e, type, index) {
            this.activeIndex = index;
            this.isShow = false;
            this.isCoordinateShow = false;
            this.$emit('drawTypeSelect', { x: e.clientX, y: e.clientY }, type);
        },
        resetPath() {
            this.$refs.searchPopup.clearInput();
            this.$refs.searchCoordinate.clearInput();
            this.$emit('resetPath', 'resetPath');
        },
        returnAfter() {
            this.$emit('returnAfter', 'returnAfter');
            if (this.activeIndex === 2 || this.activeIndex === 6) {
                return;
            }
            this.drawTypeSelect('', 'hander', 7);
        },
        hide() {
            this.isShow = false;
            // this.isCoordinateShow = false;
            this.cancleSelect();
        },
        showSearchPop(index) {
            if (this.activeIndex === index) {
                return;
            }
            if (!this.isShow) {
                this.isCoordinateShow = false;
                this.activeIndex = index;
                this.isShow = !this.isShow;
                this.$emit('drawTypeSelect', '', 'hander', 7);
                this.$emit('searchDrawTypeClick');
            } else {
                this.cancleSelect();
                this.isShow = !this.isShow;
            }
        },
        showSearchCoordinate(index) {
            if (this.activeIndex === index) {
                return;
            }
            if (!this.isCoordinateShow) {
                this.isShow = false;
                this.activeIndex = index;
                this.isCoordinateShow = !this.isCoordinateShow;
                this.$emit('drawTypeSelect', '', 'hander', 7);
                this.$emit('searchDrawTypeClick');
            } else {
                this.cancleSelect();
                this.isCoordinateShow = !this.isCoordinateShow;
            }
        },
    },
};
</script>

<style scoped lang="scss">
::v-deep .indexInput .el-input__inner {
    padding: 0 30px 0 0 !important;
}
.indexInput {
    width: 86px;
}
.draw-type-c {
    width: 100%;
    border-radius: 2px;
    background: #ffffff;
    position: relative;
    display: flex;
    justify-content: space-around;
    line-height: 50px;
    color: #595d67;
    & + & {
        margin-top: 20px;
        display: inline-block;
        width: auto;
        .hand {
            white-space: nowrap;
        }
    }
}
.hand {
    padding: 0 20px;
    width: 100%;
    box-sizing: border-box;
}
.search-popup {
    position: absolute;
    top: 63px;
    left: 255px;
    z-index: 999999;
}
.search-coordinate {
    position: absolute;
    top: 63px;
    z-index: 999999;
}
.sanjiao {
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-bottom-color: white;
    position: absolute;
    top: -19px;
    left: 37%;
}
.ul-p {
    font-size: 14px;
    line-height: 20px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
}
.smallBox {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}
.SvgIconFont {
    font-size: 20px;
}
.selectType {
    padding: 0 20px 0 0;
}
.selectButton {
    padding: 0;
}
.margin2 {
    margin-right: 8px;
}
.SvgIcon1 {
    font-weight: bolder;
    font-size: 15px;
    color: #8d8d8e;
    vertical-align: middle;
}
.active {
    color: #e60044;
    .SvgIcon1 {
        color: #e60044;
    }
}
</style>
